.menu {
  @apply mx-3 my-1 p-2 px-4 rounded-xl cursor-pointer transition-colors duration-300;
  @apply border-2 border-white border-opacity-0;
  @apply hover:border-opacity-100;
  @apply flex justify-between items-center;
  &:hover {
    // background-color: var(--vt-c-bg-soft);
    border-color: var(--vt-c-brand);
  }
  &.active {
    background-color: var(--vt-c-bg-mute); 
  }
  .menu-left {
    @apply flex justify-start items-center flex-grow;
    .menu-icon {
      @apply scale-150;
    }
    .menu-text {
      @apply mx-4 w-1/2;
      @apply hover:animate-wiggle;
    }
  }
  .menu-right {
    @apply flex-grow-0;
    fill: var(--vt-c-text-2);
  }
}